<template>
  <div>
    <template v-for="item in items">
      <el-col :span="2" style="width: 0px;">
        <span
          class=" fa fa-long-arrow-up primary big ml5"
          @click="up(item)"
        ></span>
        <span
          class=" fa fa-long-arrow-down primary big ml5"
          @click="down(item)"
        ></span>
      </el-col>
      <template v-for="(f, index) in field.fields">
        <el-col :span="size(f, field.fields)">
          <template v-if="f.type == 'select' || f.type == 'multiselect'">
            <template
              v-if="$store.state.edit.entry.sources[sourceKey(f, item)]"
            >
              <el-select
                size="mini"
                v-model="item[f.field]"
                filterable
                clearable
                :placeholder="m(f.caption)"
                @change="sourceChange(f, item)"
                :multiple="f.type == 'multiselect'"
              >
                <el-option
                  v-for="k in Object.keys(
                    $store.state.edit.entry.sources[sourceKey(f, item)]
                  )"
                  :key="k"
                  :label="
                    m($store.state.edit.entry.sources[sourceKey(f, item)][k])
                  "
                  :value="k"
                >
                </el-option>
              </el-select>
            </template>
          </template>
          <template v-else-if="f.type == 'static'">
            <v-static-field :field="f" :data="item" :inner="true" />
          </template>
          <template v-else-if="f.type == 'switch'">
            <el-switch
              size="mini"
              v-model="item[f.field]"
              :active-text="f['active-text'] ? m(f['active-text']) : '是'"
              :inactive-text="f['inactive-text'] ? m(f['inactive-text']) : '否'"
              @change="$store.state.edit.dataChanged = true"
            >
            </el-switch>
          </template>
          <template v-else>
            <el-input
              size="mini"
              @change="$store.state.edit.dataChanged = true"
              auto-complete="off"
              v-model="item[f.field]"
              :placeholder="m(f.caption)"
            >
            </el-input>
          </template>
        </el-col>
      </template>
    </template>
  </div>
</template>

<script>
import { m } from "@/store/yg/common/local";
import Vue from "vue";

export default {
  name: "v-static-field",
  props: ["data", "field", "inner"],
  data() {
    return {
      items: []
    };
  },
  methods: {
    size(field, fields) {
      debugger;
      var length = fields.length;
      var hasstatic = false;
      for (var i = 0; i < this.field.fields.length; i++) {
        var f = this.field.fields[i];
        if (f.type == "static") {
          hasstatic = true;
          break;
        }
      }
      if (field.type == "static") {
        return 22 - 3 * (length - 1);
      }
      if (hasstatic) {
        return 3;
      }
      return 22 / length;
    },
    className() {
      if (this.inner) {
        return "";
      }
      return "wall";
    },
    colSize(type, length) {
      debugger;
      if (length <= 2) {
        return type == "static" ? 6 : 4;
      }
      if (length <= 3) {
        return type == "static" ? 5 : type == "text" ? 2 : 4;
      }
      if (length <= 4) {
        return type == "text" ? 2 : 3;
      }
      return 2;
    },
    add() {
      var item = {};
      this.items.push(item);
    },
    minus(item) {
      var index = this.items.indexOf(item);
      if (index > -1) {
        this.items.splice(index, 1);
      }
    },
    up(item) {
      var index = this.items.indexOf(item);
      if (index == 0) {
        return;
      }
      var newItems = [];
      if (index - 1 > 0) {
        newItems = this.items.slice(0, index - 1);
      }
      newItems = newItems.concat(item);
      newItems = newItems.concat(this.items.slice(index - 1, index));
      if (index + 1 < this.items.length) {
        newItems = newItems.concat(this.items.slice(index + 1));
      }

      this.items = newItems;
    },
    down(item) {
      var index = this.items.indexOf(item);
      if (index + 1 == this.items.length) {
        return;
      }
      var newItems = [];
      newItems = this.items.slice(0, index);
      if (index + 1 < this.items.length) {
        newItems = newItems.concat(this.items.slice(index + 1, index + 2));
      }
      newItems = newItems.concat(item);
      if (index + 2 < this.items.length) {
        newItems = newItems.concat(this.items.slice(index + 2));
      }
      this.items = newItems;
    },
    m(k) {
      return m(k, true);
    },
    callbefore() {
      this.data[this.field.field] = JSON.stringify(this.items);
    },
    sourceKey(row, item) {
      var key =
        row.source + (row.arg ? this.$store.state.edit.row[row.arg] : "");
      if (row.dependency) {
        key +=
          " " +
          (item[row.dependency]
            ? item[row.dependency]
            : this.data[row.dependency]);
      }

      return key;
    },
    sourceChange(row, item) {
      this.$store.state.edit.dataChanged = true;
      if (this.$store.state.edit.entry.dependencies[row.field]) {
        var field = this.$store.state.edit.entry.dependencies[row.field][
          "field"
        ];
        Vue.set(item, field, "");
        this.loadSource(row.field, item);
      }
    },
    loadSource(dependency, item) {
      var bean = this.$store.state.edit.entry.dependencies[dependency][
        "source"
      ];
      var arg = item[dependency];
      this.$store.dispatch("loadEditOptionSource", { bean: bean, arg: arg });
    }
  },
  mounted() {
    if (!this.data) {
      this.data = {};
    }
    if (this.data[this.field.field]) {
      this.items = JSON.parse(this.data[this.field.field]);
    } else {
      this.items = [];
      if (!this.inner) {
        this.add();
      }
    }

    if (this.$store.state.edit.entry.dependencies) {
      var fields = this.field.fields;
      for (var j in this.items) {
        var item = this.items[j];
        for (var i in fields) {
          var f = fields[i].field;
          if (this.$store.state.edit.entry.dependencies[f] && item[f]) {
            this.loadSource(f, item);
          }
        }
      }
    }

    this.$store.dispatch("switchColor", this.$store.state.auth.user.color);
  }
};
</script>

<style>
.wall {
  padding: 10px;
  border: #409eff solid 1px;
}
</style>
